<!doctype html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
    <head th:replace="~{commons/common::dom-head('我的资料')}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
        <!-- 自定义 CSS -->
        <link rel="stylesheet" th:href="@{/static/css/common.css}" href="../../../static/css/common.css">
        <title>我的资料</title>
    </head>
    <body>
        <div class="header bg-light mb-3 shadow-sm" th:replace="~{commons/common::navbar(1)}">
            <nav class="navbar navbar-expand-lg navbar-light bg-light container">
                <a th:href="@{/}" class="navbar-brand" href="#">我的论坛</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a th:href="@{/}" class="nav-link" href="#">首页 <span
                                    class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item" th:if="${session.USER != null}">
                            <a class="nav-link" href="#" th:href="@{/u/message/add}">新增</a>
                        </li>
                    </ul>
                    <a th:if="${session.USER == null}" th:href="@{/login}"
                       class="text-decoration-none text-primary">请登录</a>
                    <div class="nav-item dropdown" th:if="${session.USER != null}">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-user"></i>
                            <span class="text-primary" th:text="${session.USER.name}">用户名</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">个人中心</a>
                            <button id="logoutBtn" class="dropdown-item"><i class="fas fa-power-off"></i> 注销</button>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="content">
            <div class="container bg-white mt-5 clearfix">
                <div class="row">
                    <div class="table-responsive">
                        <h3 class="text-info text-center bg-light mb-0 py-3">
                            <i class="fas fa-edit text-warning"></i> 用户资料
                        </h3>
                        <table class="table table-bordered">
                            <tr>
                                <th class="text-right text-muted bg-light">用户ID</th>
                                <td>
                                    <span class="text-muted" th:text="${user.id}">1</span>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">昵称</th>
                                <td>
                                    <input class="form-control-sm border-info border w-25 d-inline font-weight-bold text-info"
                                           type="text" id="name" name="name" value="ajun" th:value="${user.name}">
                                    <button id="updUsernameBtn" class="btn btn-sm btn-info mb-1">
                                        更改昵称
                                    </button>
                                    <div class="text-danger">注:用户名仅限4~30位中文或英文字符和数字</div>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">安全</th>
                                <td>
                                    <a th:href="@{/u/info/pwd}" href="#"
                                       class="btn-link text-decoration-none text-primary">
                                        <i class="fas fa-key"></i> 更改密码
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">头像</th>
                                <td>
                                    <input id="fileSelector" type="file" style="display: none"
                                           onchange="selectFile(this)">
                                    <img th:if="${user.thumb == null || user.thumb == ''}"
                                         th:src="@{/static/img/user.jpg}"
                                         src="../../../static/img/user.jpg" class="img-thumbnail avatar" width="75px"
                                         alt="thumb" onclick="thumbClick(this)"/>
                                    <img th:if="${user.thumb != null && user.thumb != ''}" th:src="${user.thumb}"
                                         src="../../../static/img/user.jpg" class="img-thumbnail avatar" width="75px"
                                         alt="thumb" onclick="thumbClick(this)"/>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">发文限制</th>
                                <td>
                                    <span>今日剩余 <span th:text="${userAbility.msgCount}">5</span> 次</span>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">图片限制</th>
                                <td>
                                    <span>今日剩余 <span th:text="${userAbility.imageCount}">15</span> 次</span>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">回复限制</th>
                                <td>
                                    <span>今日剩余 <span th:text="${userAbility.replyCount}">20</span> 次</span>
                                </td>
                            </tr>
                            <tr>
                                <th class="text-right text-muted bg-light">操作</th>
                                <td>
                                    <button id="logoutBtn2" class="btn btn-sm btn-info text-white mr-2">
                                        退出登录
                                    </button>
                                    <button id="delBtn" class="btn btn-sm btn-danger ml-2"
                                            data-toggle="tooltip" data-placement="right" title="危险操作">
                                        注销
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer" th:replace="~{commons/common::footer}">
            <hr>
            <div class="text-center">
                <p class="small text-muted m-0">
                    <span id="span"></span> | All Right Reserved © 2020 Designed by AJun
                </p>
                <a class="text-decoration-none text-muted small m-0" target="_blank"
                   href="http://www.beian.miit.gov.cn/">
                    备案号: 陕ICP备19017955号
                </a>
            </div>
            <script type="text/javascript">
                function runtime() {
                    // 初始时间，日/月/年 时:分:秒
                    X = new Date("5/30/2020 12:28:00");
                    Y = new Date();
                    T = (Y.getTime() - X.getTime());
                    M = 24 * 60 * 60 * 1000;
                    a = T / M;
                    A = Math.floor(a);
                    b = (a - A) * 24;
                    B = Math.floor(b);
                    c = (b - B) * 60;
                    C = Math.floor((b - B) * 60);
                    D = Math.floor((c - C) * 60);
                    //信息写入到DIV中
                    span.innerHTML = "小站已勉强运行: " + A + "天" + B + "小时" + C + "分" + D + "秒"
                }

                setInterval(runtime, 1000);
            </script>
        </div>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/static/js/bootstrapQ.js}" src="../../static/js/bootstrapQ.js"></script>
        <script th:inline="javascript">
            /* 初始化工具提示 */
            $(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });

            /* 退出登录 */
            $('#logoutBtn').click(logout);
            $('#logoutBtn2').click(logout);

            /* 用户退出登录 */
            function logout() {
                $.ajax({
                    url: /*[[@{/logout.do}]]*/'',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            location.href = /*[[@{/}]]*/'';
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            }

            /* 更改用户昵称 */
            $('#updUsernameBtn').click(function () {
                let req = {};
                req.name = $.trim($('#name').val());
                if (req.name.length === 0) {
                    bootstrapQ.msg({msg: '请输入新昵称', type: 'warning', time: 2000});
                    return;
                }

                bootstrapQ.confirm({
                    id: 'delModel',
                    title: '提示',
                    msg: '确认更改昵称吗？',
                    backdrop: 'true'
                }, function () {
                    $.ajax({
                        url: /*[[@{/u/user/info/updUserName.do}]]*/'',
                        method: 'POST',
                        data: JSON.stringify(req),
                        dataType: 'json',
                        contentType: 'application/json;charset=utf-8',
                        processData: false,
                        success: function (resp) {
                            if (resp.success) {
                                location.reload();
                            } else {
                                bootstrapQ.msg({msg: resp.message, type: 'warning', time: 2000});
                            }
                        },
                        error: function () {
                            bootstrapQ.alert({
                                title: '提示',
                                msg: '网络异常',
                                backdrop: 'true'
                            }, function () {
                                location.reload();
                            });
                        }
                    });
                });
            });

            /* 用户头像上传 */
            // 模拟点击
            function thumbClick(dom) {
                let fileSelector = $('#fileSelector');
                fileSelector.click(); // 模拟点击 file 控件
                fileSelector[0].target = dom; // dom指向 <img>控件
            }

            // 图片上传
            function selectFile(btn) {
                // 获取选择的文件
                let file = btn.files[0]; // 获取用户选择的文件
                let formData = new FormData(); // 构造表单对象
                formData.append('file', file); // 添加文件表单项

                btn.value = ''; // 清除文件选择按钮的选择
                let thumb = btn.target; // <img> 控件

                // 文件后缀和大小检查
                let type = file.type;
                if (type !== 'image/jpeg' && type !== 'image/png') {
                    bootstrapQ.msg({msg: '不支持的类型' + type, type: 'warning', time: 2000});
                    return;
                }
                if (file.size > 3000000) {
                    bootstrapQ.msg({msg: '图片太大,不得大于3MB!', type: 'warning', time: 2000});
                    return;
                }

                /* 文件上传 */
                $.ajax({
                    url: /*[[@{/u/user/info/updateAvatar.do}]]*/'',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (resp) {
                        if (resp.success) {
                            let data = resp.data;
                            $(thumb).prop('src', data.tmpUrl);
                            thumb.data = data; // 记录应答数据
                            location.reload();
                        } else {
                            bootstrapQ.msg({msg: resp.message, type: 'warning', time: 2000});
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            }

            /* 注销账号(危险操作，需要多次确认，后台邮箱确认，验证码确认，三天后删除) */
            $('#delBtn').click(function () {
                $.ajax({
                    url: /*[[@{/u/user/info/delUser.do}]]*/'',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            location.href = /*[[@{/}]]*/'';
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'danger', time: 2000});
                    }
                });
            })
        </script>
    </body>
</html>